<template>
  <div>
    <!-- 客户关系 -->
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="1" label="联系历史">
        <contactHistory :activeName="activeName"></contactHistory>
      </el-tab-pane>
      <el-tab-pane name="2" label="联系人信息">
        <contactInformation :activeName="activeName"></contactInformation>
      </el-tab-pane>
      <el-tab-pane name="3" label="项目信息">
        <projectInformation :activeName="activeName"></projectInformation>
      </el-tab-pane>
      <el-tab-pane name="4" label="合作关系">
        <cooperativeRelationship :activeName="activeName"></cooperativeRelationship>
      </el-tab-pane>
      <el-tab-pane name="5" label="自定义重客关系">
        <contactHistory :activeName="activeName"></contactHistory>
      </el-tab-pane>
      <el-tab-pane name="6" label="自定义三航关系">
        <contactInformation :activeName="activeName"></contactInformation>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="customerRelationship">
import { provide, ref, watch } from "vue"
import contactHistory from "./components/contactHistory.vue"
import contactInformation from "./components/contactInformation.vue"
import projectInformation from "./components/projectInformation.vue"
import cooperativeRelationship from "./components/cooperativeRelationship.vue"
import customizeDuplicateDuest from "./components/customizeDuplicateDuest.vue"
import customizeRelationshipsh from "./components/customizeRelationshipsh.vue"

  const activeName = ref('1')

  provide('activeName', activeName.value)

  watch(activeName, (val) => {
    // console.log('val', val)
  })

  const handleClick = (tab) => {
    // console.log(activeName.value);
  }
</script>
<style lang="scss" scoped>
</style>
